﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Events" />
    <meta name="description" content="jqxDocking has events which are connected with some actions on the windows inside. Common events which probably you'll need 
    to handle are the dragEnd and dragStart event. You can see these events down in the demo." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title id='Description'>Docking Keyboard Navigation.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#docking').jqxDocking({ keyboardNavigation: true, orientation: 'horizontal', width: 650, mode: 'default' });
            $("#docking").jqxDocking('showAllCollapseButtons');
            $("#docking").jqxDocking('focus');
        });
    </script>
</head>
<body class='default'>

    <div id="docking">
        <div>
            <div id="window0" style="height: 150px">
                <div>
                    CISC
                </div>
                <div>
                    Before the RISC philosophy became prominent, many computer architects tried to bridge
                        the so called semantic gap, i.e. to design instruction sets that directly supported
                        high-level programming constructs such as procedure calls, loop control, and complex...
                </div>
            </div>
            <div id="window1" style="height: 150px">
                <div>
                    Database management system
                </div>
                <div>
                    A database management system (DBMS) is a software package with computer programs
                        that control the creation, maintenance, and the use of a database. It allows organizations
                        to conveniently develop databases...
                </div>
            </div>
        </div>
        <div>
            <div id="window2" style="height: 150px">
                <div>
                    RISC
                </div>
                <div>
                    Some aspects attributed to the first RISC-labeled designs around 1975 include the
                        observations that the memory-restricted compilers of the time were often unable
                        to take advantage...
                </div>
            </div>
        </div>
    </div>
    <br />
    <br />
    <ul>
        <li><b>Tab</b> - Once the focus is received, users will be able to use the keyboard to change the focused Docking Panel.</li>
        <li><b>Shift+Tab</b> - reverses the direction of the tab order. Once in the widget, a Shift+Tab will take the user to the previous Docking Panel.</li>
        <li><b>Esc</b> - closes the focused Docking Panel.</li>
        <li><b>Enter</b> - collapses/expands the focused Docking Panel.</li>
    </ul>
</body>
</html>
